import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { NavLink } from 'react-router-dom'
import { Tabs } from 'antd-mobile'
import { Swiper, Toast } from 'antd-mobile'
import { reqgetcate, reqgetbanner, reqgetseckill, reqcountdown } from '../../http/api'
import { reqgetnew, reqgetgroupon } from '../../http/api'
import "./Home.less"



export default class Home extends Component {
    constructor() {
        super()
        this.state = {
            cates: [

            ],
            banner: [

            ],
            newren: [

            ],
            wanre:[

            ],
            skill:[

            ]
        }

    }
    componentDidMount() {
        // 新人专享
    
        reqgetnew().then(res => {
            // console.log(res);
            this.setState({
                newren: res.data.list
            })
        })
        // 万人团
        reqgetgroupon().then(res=>{
            // console.log(res);
            this.setState({
                wanre:res.data.list
            })
        })
        // 秒杀
        reqgetseckill().then(res=>{
            // console.log(res);
            this.setState({
                skill:res.data.list
            })
        })
        // 倒计时
        reqcountdown().then(res=>{
            console.log(res);
            this.setState({
                
            })
        })
        // 请求分类

        reqgetcate().then(res => {
            this.setState({
                cates: res.data.list
            })
        });
        // 请求图
        reqgetbanner().then(res => {
            this.setState({
                banner: res.data.list
            })
        })

    }
    push() {
        console.log(this.props);
        this.props.history.push("/search")
    }
    changeTab(e) {
        console.log(e);
        this.props.history.push('/list?id=' + e)
    }
    render() {
        let { newren,cates,wanre,skill, } = this.state
   
      console.log(skill[0]);
        return (
            <div>
                <Header title="首页" back></Header>
                {/* 新人专享 */}
                <div className="bdzhong">
                    <div className="bgheader"><span>新人专享</span> <b>查看全部＞</b></div>
                    <div className="bgbanner">
                        <h3><p>1重礼</p> <span>信任特价商品专区 (限量供应先到先得)</span></h3>
                        <div className="wrap">
                        <ul className="bgul">
                            {
                                newren.map(item => {
                                    return (<NavLink key={item.id} to={"/detail/"+item.id+'/'+item.goodsname}>
                                         <li className="bgli" key={item.id}>
                                        <img src={item.img} alt="" />
                                        <span>￥{item.price}</span>
                                        <i className="iconfont icon-gouwuche"></i> 
                                        <b>￥{item.market_price}</b>
                                    </li>
                                    </NavLink>)
                                })
                            }
                        </ul>
                        </div>
                    </div>

                </div>
                <Tabs defaultActiveKey='1' onChange={(e) => this.changeTab(e)}>
                    {
                        cates.map(item => {
                            return (<Tabs.Tab title={item.catename} key={item.id}>

                            </Tabs.Tab>)
                        })
                    }
                </Tabs>
                {/* 万人团 */}
                <div className="bdzhong">
                    <div className="bgheader"><span>万人团</span> <b>查看全部＞</b></div>
                    <div className="bgbanner">
                        <h3><p>2重礼</p> <span>信任特价商品专区 (限量供应先到先得)</span></h3>
                        <div className="wrap">
                        <ul className="bgul">
                            {
                                wanre.map(item => {
                                    return <li className="bgli" key={item.id}>
                                        <img src={item.img} alt="" />
                                        <span>￥{item.price}</span>
                                        <i className="iconfont icon-gouwuche"></i> 
                                        <b>￥{item.market_price}</b>
                                   
                                  </li>
                                })
                            }
                        </ul>
                        </div>
                    </div>

                </div>
                {/* 超级秒杀 */}
                <div className="bdzhong">
                    <div className="bgheader"><span>超级秒杀</span></div>
                    <div className="bgbanner">
                        <div className="img1">
                        <img src="/uploads/potato.jpg" alt="" />
                        </div>
                        <div className="bgtext">
                             
                              <h3> <span >7.9折</span>来自喜马拉雅大雪山的大土豆</h3>
                        </div>
                     
                    </div>

                </div>
                {/* 秒杀 */}
                <div className="bdzhong">
                    <div className="bgheader"><span>秒杀</span> <b>查看全部＞</b></div>
                    <div className="bgbanner">
                        <h3><p>3重礼</p> <span>信任秒杀商品专区 (限量供应先到先得)</span></h3>
                        <div className="wrap">
                        <ul className="bgul">
                            {
                                skill.map(item => {
                                    return <li className="bgli" key={item.id}>
                                        <img src={item.img} alt="" />
                                        <span>￥{item.price}</span>
                                        <i className="iconfont icon-gouwuche"></i> 
                                        <b>￥{item.market_price}</b>
                                   
                                  </li>
                                })
                            }
                        </ul>
                        </div>
                    </div>

                </div>
                {/* 轮播图 */}
                {/* <Swiper autoplay style={{height:"3.8rem"}}>{
                banner.map((item) => (
                    <Swiper.Item key={item.id}>
                       <img src={item.img} alt="" />
                    </Swiper.Item>
                ))}</Swiper> */}

                {/* 1.Link NavLink 都是无条件跳转，NavLink有activeClassName属性
                2.编程式导航
                    this.props.history.push(path) 添加一条新的历史记录
                    this.prosp.history.replace(path) 用新的历史记录替换当前历史记录
                    this.props.history.go(-1) 返回
                    this.props.history.goBack() 返回
                
                注意：
                    在路由组件中，编程式导航是可以直接使用。
                    在非路由组件中，props上是没有history的，需要通过withRouter() 将组件变为路由组件才可以使用编程式导航 */}
                <NavLink to="/search">NavLink搜素</NavLink>
                <button onClick={() => this.push()}>push搜索</button>
                {/* 列表 */}
                {/* {
                     cates.map(item=>(<div key={item.id}>
                         <NavLink to={"/list?id="+item.id+"&a=1&b=2"}>{item.catename}</NavLink>
                     </div>))
                 } */}
            </div>

        )
    }
}
